﻿<h4>Neutral appearance</h4>
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 1em;">
    <FluentAnchor Href="#" IconStart="@(new Icons.Regular.Size16.Globe())">
        Icon at start
    </FluentAnchor>

    <FluentAnchor Href="#" IconEnd="@(new Icons.Regular.Size16.Globe())">
        Icon at end
    </FluentAnchor>

    <FluentAnchor Href="#">
        <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Success" Slot="start" />
        Icon at start in content
    </FluentAnchor>

    <FluentAnchor Href="#">
        Icon at end in content
        <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Success" Slot="end" />
    </FluentAnchor>
</div>
<h4>Hypertext appearance</h4>
<p>
    By default, the margin between the icon and the link is equal to the margin that is used for the other
    appearances. If you find that margin to large, you can add the following to your CSS:<br/><br />
    <CodeSnippet>
        /* for icon at the start */
        fluent-anchor[appearance="hypertext"]::part(start) {
            margin-inline-end: calc(var(--design-unit) * 1px);
        }
        /* for icon at the end */
        fluent-anchor[appearance="hypertext"]::part(end) {
        margin-inline-start: calc(var(--design-unit) * 1px);
        }
    </CodeSnippet>
    <br />
    <em>Do not use these styles if there is no icon being displayed with a hypertext. It will cause the hypertext to get a margin at the start/end.</em>
</p>
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 1em;">
    <FluentAnchor Appearance="@Appearance.Hypertext" Href="#" IconStart="@(new Icons.Regular.Size16.Globe())">
        Icon at start
    </FluentAnchor>

    <FluentAnchor Appearance="@Appearance.Hypertext" Href="#" IconEnd="@(new Icons.Regular.Size16.Globe())">
        Icon at end
    </FluentAnchor>

    <FluentAnchor Appearance="@Appearance.Hypertext" Href="#">
        <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Success" Slot="start" />
        Icon at start in content
    </FluentAnchor>

    <FluentAnchor Appearance="@Appearance.Hypertext" Href="#">
        Icon at start in content
        <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Success" Slot="end" />
    </FluentAnchor>
</div>

<div style="display: flex; align-items: center; gap: 10px; margin-top: 1em;">
    With icon in default slot:
        <FluentAnchor Href="#" aria-label="test">
            <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" />
        </FluentAnchor>

</div>
